<template>
    <view>
        <u-popup :show="showPopup" title="更多筛选" :round="10" :closeOnClickOverlay="true" @close="onClosePopup">
            <!--<view class="jk-popup-head">
                <view class="jk-popup-head-item" @click="onClosePopup">关闭</view>
                <view class="jk-popup-head-item jk-popup-head-title">搜索更多</view>
                <view class="jk-popup-head-item jk-popup-head-item-confirm">
                    <view @click="onConfirmBtn">确认</view>
                </view>
            </view>-->
            <view class="flex-center">
                <view class="head-line"></view>
            </view>
            <view class="jk-popup-content">
                <view class="option-item">
                    <view class="option-item-title">客户</view>
                    <view class="option-item-val">
                        <u-input v-model="searchParams.customerName" placeholder="客户名称" :cursorSpacing="220" class="option-item-val"></u-input>
                    </view>
                </view>
                <view class="option-item">
                    <view class="option-item-title">出库单号</view>
                    <view class="option-item-val">
                        <u-input v-model="searchParams.code" placeholder="出库单号" :cursorSpacing="110" class="option-item-val"></u-input>
                    </view>
                </view>
                <!--<view class="option-item">
                    <view class="option-item-title">批次</view>
                    <view class="option-item-val">
                        <u-input v-model="searchParams.batchCode" :cursorSpacing="210" placeholder="批次" class="option-item-val"></u-input>
                    </view>
                </view>
                <view class="option-item">
                    <view class="option-item-title">订单号</view>
                    <view class="option-item-val">
                        <u-input v-model="searchParams.productOrderCode" placeholder="订单号" :cursorSpacing="150" class="option-item-val"></u-input>
                    </view>
                </view>
                <view class="option-item">
                    <view class="option-item-title">生产类型</view>
                    <view class="option-item-val">
                        <view class="flex-start-center margin-right-20 margin-left-20" @click.native="searchParams.ifTest = false">
                            <view style="width: 30rpx;height: 20rpx; border: solid 1rpx #808695;border-radius: 4rpx;" :style="{ background: !searchParams.ifTest ? '#2d8cf0' : '' }"></view>
                            <view>正式生产</view>
                        </view>
                        <view class="flex-start-center" @click.native="searchParams.ifTest = true">
                            <view style="width: 30rpx;height: 20rpx; border: solid 1rpx #808695;border-radius: 4rpx;" :style="{ background: searchParams.ifTest ? '#2d8cf0' : '' }"></view>
                            <view>试产打样</view>
                        </view>
                    </view>
                </view>-->
                <!--<view class="option-item">
                    <view class="option-item-title">出库日期</view>
                    <view class="option-item-val" @click="showSelectDatePicker = true" style="padding: 0 14rpx;">
                        <view :inputStyle="{background: 'none'}" class="option-item-val">{{ searchParams.belongDate }}</view>
                    </view>
                </view>-->
            </view>
            <view class="flex-center footer-box">
                <u-button type="primary" size="large" @click="onConfirmBtn">搜索</u-button>
            </view>
        </u-popup>
        <u-datetime-picker
            v-if="showD"
            v-model="initTimeVal"
            :show="showSelectDatePicker"
            :closeOnClickOverlay="true"
            mode="date"
            cancelText="清空"
            @confirm="onConfirmOfSelectDatePicker"
            @close="showSelectDatePicker = false"
            @cancel="onClearOfSelectDatePicker"
        ></u-datetime-picker>
    </view>
</template>
<script>
import {formatDate} from "../../../../../utils/jk-utils";

export default {
    props: {
        popupState: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showD: false,
            initTimeVal: '',
            showSelectDatePicker: false,
            showSelectMachinePopup: false,
            showPopup: false,
            searchParams: {
                ifTest: false,
                customerName: ''
            }
        };
    },
    methods: {
        onConfirmBtn() {
            this.$emit('confirm', JSON.parse(JSON.stringify(this.searchParams)));
        },
        onConfirmOfSelectDatePicker(e) {
            this.$set(this.searchParams, 'belongDate', formatDate(e.value));
            this.showSelectDatePicker = false;
        },
        onClearOfSelectDatePicker() {
            this.$set(this.searchParams, 'belongDate', '');
            this.showSelectDatePicker = false;
        },
        onClosePopup() {
            this.$emit('close', false);
        }
    },
    mounted() {
    },
    watch: {
        popupState(newVal) {
            this.showPopup = newVal;
            if (newVal) {
                this.initTimeVal = Date.now();
                this.showD = true; // 解决日期组件-起始无法默认到当前时间的bug
            }
        }
    }
}
</script>
<style scoped lang="scss">
$label_width: 160rpx;
.jk-popup-head {
    height: 88rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    border-bottom: solid 1rpx #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    //margin-bottom: 20rpx;
    .jk-popup-head-item-confirm {
        text-align: right;
    }
    .jk-popup-head-item {
        font-size: 28rpx;
        width: calc(100% / 3);
    }
    .jk-popup-head-title {
        height: 100%;
        font-size: 34rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.head-line {
    width: 80rpx;
    height: 8rpx;
    background: #dcdee2;
    border-radius: 12rpx;
    margin: 30rpx 0;
}
.footer-box {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
}
.jk-popup-content {
    width: 100%;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    .option-item {
        width: 100%;
        height: 72rpx;
        display: flex;
        align-items: center;
        margin: 18rpx 0;
        font-size: 28rpx;
        .option-item-title {
            width: $label_width;
        }
        .option-item-val {
            width: calc(100% - #{$label_width});
            height: 100%;
            box-sizing: border-box;
            background: #F2F4FF;
            border: solid 1rpx #F2F4FF;
            border-radius: 12rpx;
            display: flex;
            align-items: center;
        }
    }
}
</style>
